<template>
	<view>
		<u-navbar placeholder fixed>
			<view slot="left" class="d-flex"><text class="d-font-36" style="font-weight: bold;">消息</text></view>
			<view slot="right" class="d-flex">
				<u--image src="/static/icon/icon-24.png" width="44rpx" height="44rpx"></u--image>
				<u--image style="margin: 0 30rpx;" src="/static/icon/icon-25.png" width="44rpx" height="44rpx"></u--image>
				<u--image src="/static/icon/icon-26.png" width="44rpx" height="44rpx"></u--image>
			</view>
		</u-navbar>
		<view class="search u-border-bottom d-p-l-30 d-p-r-30 d-p-t-20 d-p-b-20 d-flex">
			<view class="input d-flex d-flex-1">
				<u-icon name="search" size="38rpx" color="#ADB4BD"></u-icon>
				<view class="d-flex-1"><u--input border="none" style="padding: 0;height: 75rpx;" placeholder="请输入查询信息"></u--input></view>
			</view>
			<u-button text="搜索" type="primary" :customStyle="{ width: '136rpx', height: '75rpx', marginLeft: '20rpx' }"></u-button>
		</view>
		<u-gap height="115rpx" bgColor="#ffffff"></u-gap>
		<view class="d-p-30">
			<!-- 两种类型列表 注意看看 -->
			<view class="list d-m-b-30 d-p-l-30 d-p-r-30 d-p-t-40 d-p-b-40 d-flex" style="position: relative;" v-for="(item, index) in 1" :key="index" @click="$u.toast('暂无功能')">
				<!-- 系统消息 -->
				<u--image v-if="index % 2" src="/static/icon/icon-09.png" width="90rpx" height="90rpx"></u--image>
				<!-- 审批 -->
				<u--image v-else src="/static/icon/icon-10.png" width="90rpx" height="90rpx"></u--image>
				<view class="d-flex-1 d-p-l-30">
					<view class="d-font-32" style="font-weight: bold;color: #162233;">{{ index % 2 ? '新增班组审批' : '系统消息' }}</view>
					<view class="d-font-28 d-m-t-10" style="color: #ADB4BD;">最新消息：有待审批文件</view>
					<!-- 审批消息 -->
					<text v-if="index % 2" class="d-font-20" style="position: absolute;right: 30rpx;top: 20rpx;color: #A6ABB7;">04-22</text>
					<!-- 系统消息 -->
					<view v-else class="d-font-20 d-flex" style="position: absolute;right: 30rpx;top: 20rpx;color: #A6ABB7;">
						<text>全部</text>
						<u-icon name="arrow-right" size="20rpx" color="#A6ABB7"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss">
.search {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #ffffff;
	.input {
		height: 75rpx;
		background: #f6f7f8;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}
}
page{
	background-color: #fbfcfc;
}
.list {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #FFFFFF;
}
</style>
